<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/common/reset.css">
    <script src="/common/jquery.js"></script>
    <style>
        .according_wp {
            width: 1120px;
            height: 400px;
            margin: 120px auto;
            position: relative;
            overflow: hidden;
        }
        
        .according_wp ul>li {
            width: 40px;
            float: left;
            /* position: absolute;
            left: 0;
            top: 0; */
            /* transition: all .3s ease; */
        }
        
        .according_wp ul>li:last-child {
            width: 956px;
        }
        
        .according_wp .item {
            width: 20px;
            font-size: 20px;
            font-weight: bold;
            border-left: 1px solid #fff;
            text-align: center;
            padding: 150px 10px;
            position: absolute;
            color: #fff;
            height: 400px;
            cursor: pointer;
            background: rgba(0, 0, 0, .8);
        }
        
        .according_wp img {
            width: 956px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="according_wp">
        <ul>
            <li>
                <div class="item">爱新鲜</div>
                <img src="/img/according/1.jpg" alt="">
            </li>
            <li>
                <div class="item">一衣多穿</div>
                <img src="/img/according/2.jpg" alt="">
            </li>
            <li>
                <div class="item">评测擂台</div>
                <img src="/img/according/3.jpg" alt="">
            </li>
            <li>
                <div class="item">达人心经</div>
                <img src="/img/according/4.jpg" alt="">
            </li>
            <li>
                <div class="item">大咖卖场</div>
                <img src="/img/according/5.jpg" alt="">
            </li>
        </ul>
    </div>

    <script>
        $('div.item').on('click', function() {
            let $this = $(this)
            $this
                .parent()
                .animate({
                    'width': $this.siblings('img').width()
                }, 300)
                .siblings()
                .animate({
                    width: 40
                }, 300)
        })

        // var flagWidth = document.querySelector('.item').clientWidth;
        // var li = document.querySelectorAll('li');
        // var items = document.querySelectorAll('.item');
        // var arr = [];

        // 找到规律。动态添加left属性 0*40 1*40 2*40
        // li.forEach(function(ele, index) {
        //     ele.style.left = index * flagWidth + 'px';
        //     arr.push(index * flagWidth);
        // });

        // items.forEach(function(item, index) {
        //     var oldIndex = index;
        //     item.onclick = function() {
        //         li.forEach(function(list, index) {
        //             console.log(index, oldIndex);
        //             if (index <= oldIndex) {
        //                 list.style.left = arr[index] + 'px';
        //             } else {
        //                 list.style.left = arr[index] + 920 + 'px';
        //             }
        //         })
        //     }
        // })
    </script>
</body>

</html>